<template>
	<div id="login">
		<div class="logo">
			<img src="../assets/loginlogo.png" alt="" />
		</div>
		<div class="loginWarp">
			<p class="text">登录</p>
			<div class="inputDiv">
				<span class="iconfont">&#xe6be;</span>
				<input type="hidden" name="userName" />
				<input type="text" name="userName" placeholder="请输入用户名" v-model="userName" autoComplete="off" />
			</div>
			<div class="inputDiv">
				<span class="iconfont">&#xe6d1;</span>
				<input type="hidden" name="txtPassword" />
				<input type="password" name="txtPassword" placeholder="请输入密码" v-model="passWord" autoComplete="off" />
			</div>
			<div class="handle">
				<div>
					<Checkbox v-model="remember">记住密码</Checkbox>
				</div>
				<div class="forgetPassword" @click="forgetPassword">忘记密码？</div>
			</div>
			<div class="loginDiv">
				<Button long @click="login" icon="toLoading" :loading="loading" :disabled="isLegal">
						<span v-if="!loading">立即登录</span>
        		<span v-else>登录中</span>
				</Button>
			</div>
		</div>
	</div>
</template>

<script>
	import { setStore, getStore, removeStore, Trim, setSStore } from "@/utils/util"
	export default {
		props: [],
		data() {
			return {
				userName: "",
				passWord: "",
				remember: true,
				loading: false
			}
		},
		computed:{
			isLegal(){
				if(this.userName&&this.passWord){
					return false;
				}
				return true;
			},
		},
		methods: {
			
			login() {
				let data = {
					username: Trim(this.userName),
					password: Trim(this.passWord)
				}

				//登录请求Michael
				this.loading = true;
				
				this.$http.post("/api/user/login", data)
					.then((res) => {
						this.loading = false;
						if(res.data.code=='601') { //登录成功
							this.loading = false; //取消登录按钮的登录状态
							this.$Message.success("登录成功"); //提示登录成功
							this.isRememberPassword(data); //记住密码操作
							setSStore('user', res.data) //将登陆者的信息存入sessionStorage
							setSStore('token', res.data.token) //将登陆者token信息存入sessionStorage
							this.$router.push({ path: '/decision' }); //页面跳转
							return;
						}
						this.$Notice.error({
							title: '登录失败',
							desc: res.data.message
						});
					})
					.catch(err => {
						this.loading = false;
						this.$Notice.error({
							title: '登录失败',
							desc: err
						});
					})
			},
			forgetPassword() {
				
				alert("再想想。。。恕在下无能无力")
			},
			//是否记住密码
			isRememberPassword(data) {
				if(this.remember) {
					setStore("loginMess", data);
					return;
				}
				if(getStore("loginMess")) {
					removeStore("loginMess")
				}
			},
			//获取用户名密码
			getLoginMess() {
				let loginMess = getStore("loginMess");
				if(loginMess) {
					this.userName = loginMess.username;
					this.passWord = loginMess.password;
				}
			}
		},
		
		created() {
			//页面进入首先获取用户名密码
			this.getLoginMess();	
			
		}
	}
</script>

<style lang="scss" scoped>
	#login {
		height: 100vh;
		background: url(../assets/login.jpg) no-repeat center center;
		background-size: cover;
		position: relative;
		.logo {
			text-align: center;
			img{
				margin-top:9vh;
			}
		}
		.loginWarp {
			width: 444px;
			height: 354px;
			background: white;
			border-radius: 3px;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			.text {
				text-align: center;
				height: 84px;
				line-height: 84px;
				font-size: 22px;
				color: #666;
			}
			>div {
				width: 330px;
				margin: 0 auto;
			}
			.inputDiv {
				height: 46px;
				line-height: 46px;
				outline: none;
				border: 1px solid #dedede;
				margin-bottom: 18px;
				display: flex;
				.iconfont {
					font-size: 20px;
					padding: 0 12px;
				}
				input {
					font-size: 14px;
					outline: none;
					width: 100%;
				}
			}
			.handle {
				display: flex;
				justify-content: space-between;
				color: #666666;
				padding-top: 10px;
				.forgetPassword {
					cursor: pointer;
				}
			}
			.ivu-btn-long {
				height: 46px;
				color: #666;
				span {
					font-size: 16px;
				}
			}
			.loginDiv {
				margin-top: 12px;
				.ivu-btn-long {
					background: #ffb700;
					color: white;
				}
			}
			.signDiv {
				margin-top: 20px;
			}
		}
	}
</style>